<template>
	<div id="contact">
		<el-container>
			<el-header>
				<div class="heard_top">
					<div class="top">
						<div class="top_left">杭州天缘网络欢迎您！</div>
						<div class="top_right">
                            <el-button @click="gohome" class="Home">首页</el-button>
							<img src="../../assets/wenhao.png" alt="" />
							<span @click="gohelp()">帮助中心</span>
						</div>
					</div>
				</div>
				<div class="heard_bot">
					<div class="bot">
						<div class="top_left" @click="gohome()">
							<img src="../../assets/ka_pur.png" class="img1" />
							<img src="../../assets/jifenka.png" class="img2" />
						</div>
						<div class="top_right">
							<img src="../../assets/tel.png" alt="" class="img3" />
							<span><b>0571-86538181</b></span>
						</div>
					</div>
				</div>
			</el-header>
			<el-main>
				<div class="content">
                    <div class="con_heard">
                        <div>联系我们</div>
                    </div>
                    <div class="common">
                        <p class="p_top">
                            <img class="adress" src="../../assets/address.png" alt="">
                            <span>地址</span>
                        </p>
                        <p class="p_bot">{{adress}}</p> 
                    </div>
                    <div class="common">
                        <p class="p_top">
                            <img class="telphone" src="../../assets/telphone.png" alt="">
                            <span>电话</span>
                        </p>
                        <p class="p_bot">{{telphone}}</p> 
                    </div>
                    <div class="common">
                        <p class="p_top">
                            <img class="emill" src="../../assets/emill.png" alt="">
                            <span>邮箱</span>
                        </p>
                        <p class="p_bot">{{emill}}</p> 
                    </div>
                    <div class="common koukous">
                        <p class="p_top">
                            <img class="kefu" src="../../assets/kefu11.png" alt="">
                            <span>客服</span>
                        </p>
                        <div class="list" v-for="item in koukous" :key="item.koukou">
                            <span>{{item.type}}</span>：
                            <span>{{item.koukou}}</span>
                            <span>电话：</span>
                            <span>{{item.tel}}</span>
                        </div>
                    </div>
                    <div class="common textarea">
                        <p class="p_top">
                            <img class="fankui" src="../../assets/fankui.png" alt="">
                            <span>反馈</span>
                        </p>
                        <div style="padding-left:30px;">
                            <el-input type="textarea" placeholder="反馈内容（这里最多可输入500个字，超过请发送至我们的邮箱）" v-model="textarea"></el-input>
                            <el-input v-model="input" placeholder="请输入联系电话"></el-input>
                            <el-button @click="commit" class="commit" @keydown.enter.tab.stop.self="commit">提交反馈</el-button>
                        </div>
                    </div>
                    <div class="map border XSDFXPage" id="XSDFXPage"></div>
                </div>
			</el-main>
			<el-footer>
				<div class="foot_top">
					<span>关于我们</span>
					<span>|</span>
					<span>公司荣誉</span>
					<span>|</span>
					<span>联系我们</span>
				</div>
				<div class="foot_bot">Copyright © 2015.版权所有</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
    import { BMAP } from '@/until/map';
	export default {
		data() {
			return {
                adress:"浙江省杭州市滨江区聚业路26号金绣国际科技中心9层",
                telphone:"0571-86538181",
                emill:"CaoJian20132014@163.com",
                textarea:"",
                input:"",
                koukous:[{
                    type:"订单客服QQ",
                    koukou:"1234567890",
                    tel:"0571-86538181"
                },{
                    type:"问题处理QQ",
                    koukou:"1234567891",
                    tel:"0571-86538181"
                },{
                    type:"话费合作QQ",
                    koukou:"1234567892",
                    tel:"0571-86538181"
                },{
                    type:"流量合作QQ",
                    koukou:"1234567893",
                    tel:"0571-86538181"
                },{
                    type:"缴费合作QQ",
                    koukou:"1234567894",
                    tel:"0571-86538181"
                },{
                    type:"充卡合作QQ",
                    koukou:"1234567895",
                    tel:"0571-86538181"
                }]
			}
        },
        mounted () {
            this.$nextTick(function () {
                BMAP("GPs0d10F23Ln6ejuHXPjKO6pSs1Lx3Aj").then( BMap => {
                    //初始化实例及位置
                    const map = new BMap.Map("XSDFXPage");
                    const point = new BMap.Point(120.2223430000, 30.1907060000);
                    //地图标注
                    const marker = new BMap.Marker(point);
                    //左上角放大控件
                    const top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
                    const top_left_navigation = new BMap.NavigationControl();  //左上角，
                    //卫星图，三维图
                    const mapType1 = new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] });
                    const mapType2 = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
                    const overView = new BMap.OverviewMapControl();
                    const overViewOpen = new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
                    //添加地图类型和缩略图
                    map.centerAndZoom(point, 15);
                    map.addOverlay(marker);
                    map.addControl(top_left_control);
                    map.addControl(top_left_navigation);
                    map.addControl(mapType1);          //2D图，卫星图
                    map.addControl(mapType2);          //左上角，默认地图控件
                    map.setCurrentCity("杭州");
                    map.addControl(overView);          //添加默认缩略地图控件
                    map.addControl(overViewOpen);
                    const opts = {
                        width: 200,     // 信息窗口宽度
                        height: 100,     // 信息窗口高度
                        title: "杭州天缘网络科技有限公司", // 信息窗口标题
                        enableMessage: true,//设置允许信息窗发送短息
                        message: "~"
                    };
                    const infoWindow = new BMap.InfoWindow("地址：杭州市滨江区聚业路26号金绣国际中心", opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
                    //可缩放
                    map.enableScrollWheelZoom(true);
                    const clientWidth = document.documentElement.clientWidth;
                    if (clientWidth <= 768) {
                        map.removeControl(overView);
                        map.removeControl(overViewOpen);
                    }
                });
            });
            
        },
		methods: {
			gohome(){
                this.$router.push({
					name: 'home_login'
				});
            },
            gohelp(){
                this.$router.push({
					name: 'help'
				});
            },
            commit(){
                console.log("提交")
            }
        }
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	body{
		margin: 0 !important;
	}
	.el-header {
		width: 100%;
		height: 135px !important;
		padding: 0;
	}
	.heard_top {
		width: 100%;
		height: 40px;
		background-color: #454545;
		color: white;
	}
	.heard_top .top {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		line-height: 40px;
		font-size: 14px;
	}
	.heard_top .top img {
		width: 18px;
		height: 18px;
		vertical-align: top;
		margin-top: 11px;
	}
	.heard_bot {
		width: 100%;
		height: 95px;
		background-color: #fafafa;
	}
	.heard_bot .bot {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		color: #7b5bc7;
		line-height: 95px;
	}
	.top_left .img1 {
		width: 41px;
		vertical-align: top;
        margin-top: 25px;
        cursor: pointer;
	}
	.top_left .img2 {
		width: 85px;
		vertical-align: top;
		margin-top: 30px;
		margin-left: 10px;
        cursor: pointer;
	}
	.top_right .img3 {
		width: 25px;
		height: 25px;
		vertical-align: top;
		margin-top: 35px;
	}
	.heard_top .top_right span:hover{
		cursor: pointer;
    }
    .el-main{
        background-color: #fafafa;
        height: 1262px;
    }
    .content{
        width: 1118px;
        height: 1260px;
        padding: 0 40px;
        background-color: white;
        margin: 0 auto;
        border: 1px solid #e9e9e9;
        border-radius: 3px;
    }
    .content .con_heard{
        width: 100%;
        height: 67px;
        border-bottom: 1px solid #e9e9e9;
    }
    .con_heard div{
        height: 64px;
        width: 81px;
        text-align: center;
        line-height: 64px;
        border-bottom: 3px solid #7b5bc7;
    }
    .content .common{
        height: 114px;
        border-bottom: 1px dashed #e9e9e9;
    }
    .content p{
        height: 57px;
        line-height: 57px;
    }
    .content .p_top img{
        vertical-align: top;
    }
    .content .p_top .adress{
        margin-top: 18px;
        margin-right: 13px;
    }
    .content .p_top .emill{
        margin-top: 21px;
        margin-right: 8px;
    }
    .content .p_top .telphone{
        margin-top: 18px;
        margin-right: 8px;
    }
    .content .p_top .fankui{
        margin-top: 19px;
        margin-right: 10px;
    }
    .content .koukous{
        height: 245px;
    }
    .content .textarea{
        height: 260px;
        border-bottom: 0;
    }
    .koukous .list{
        padding-left: 35px;
    }
    .koukous .list span{
        line-height: 30px;
        color: #797979;
    }
    .koukous .list span:nth-child(3){
        margin-left: 100px;
    }    
    .kefu{
        margin-top: 18px;
        margin-right: 8px;
    }
    .content .p_bot{
        padding-left: 34px;
        color: #797979;
    }
    .map{
        height: 300px;
    }
	.el-footer {
		width: 100%;
		height: 220px !important;
		padding: 0;
		background-color: #fafafa;
	}
	.foot_top,.foot_bot {
		font-size: 14px;
		color: #666666;
	}
	.foot_top {
		width: 300px;
		text-align: center;
		display: flex;
		margin: 80px auto 0;
	}
	.foot_top span {
		width: 60px;
	}
	.foot_bot {
		width: 200px;
		text-align: center;
		margin: 0 auto 0;
		margin-top: 36px;
    }
    .el-button.el-button--default.commit{
        width: 150px;
        height: 34px;
        background-color: #8a6ad4;
        color: white;
        margin-left: 10px;
        margin-top: 16px;
    }
    .el-button.el-button--default.Home{
        width: 40px;
        height: 25px;
        margin-right: 10px;
    }
    .el-button.el-button--default.Home:hover{
        color: #8a6ad4;
        border-color: #8a6ad4;
    }
</style>